<script setup>
import { useCartStore } from '@/stores/index.js'
import { ref, onMounted, watch } from 'vue'
import { storeToRefs } from 'pinia'

const cartStore = useCartStore()
const { cartList } = storeToRefs(cartStore)

const tableRef = ref()

function indicateSelected() {
  cartList.value
    .filter((item) => item.selected)
    .forEach((selectedItem) =>
      tableRef.value.toggleRowSelection(selectedItem, true)
    )
}

onMounted(() => {
  indicateSelected()
})

const onSelect = (selection, row) => {
  row.selected = selection.includes(row)
}

const onSelectAll = (selection) => {
  cartList.value.forEach((row) => (row.selected = selection.includes(row)))
}

// async
watch(
  cartList,
  () => {
    if (cartList.value.length > 0) {
      tableRef.value.clearSelection()
      indicateSelected()
    }
  },
  { flush: 'post' }
)
</script>

<template>
  <div class="txt-cart-page">
    <div class="container m-top-20">
      <div class="cart">
        <el-table
          row-key="skuId"
          v-if="cartList.length > 0"
          :data="cartList"
          :header-cell-style="{ textAlign: 'center' }"
          :cell-style="{ textAlign: 'center' }"
          ref="tableRef"
          @select="onSelect"
          @select-all="onSelectAll"
        >
          <el-table-column type="selection" width="120" prop="selected" />
          <el-table-column prop="name" label="商品信息" width="400">
            <template #default="{ row }">
              <div class="goods">
                <img :src="row.picture" alt="" />
                <div class="info">
                  <el-row>
                    <el-text size="large">{{ row.name }}</el-text>
                  </el-row>
                  <el-row>
                    <el-text size="small">{{ row.attrsText }}</el-text>
                  </el-row>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="单价" width="220" />
          <el-table-column prop="count" label="数量" width="180">
            <template #default="{ row }">
              <el-input-number v-model="row.count" :min="1" />
            </template>
          </el-table-column>
          <el-table-column label="小计" width="180">
            <template #default="{ row }">
              <el-text size="large" class="price"
                >{{ (row.count * row.price).toFixed(2) }}
              </el-text>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作" width="140">
            <template #default="{ row }">
              <el-popconfirm
                title="确认删除吗?"
                confirm-button-text="确认"
                cancel-button-text="取消"
                @confirm="cartStore.delCart(row.skuId)"
              >
                <template #reference>
                  <a href="javascript:;">删除</a>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-empty v-else description="购物车空空如也" />
      </div>
      <div class="action" v-if="cartList.length > 0">
        <div class="batch">
          <el-text size="large"
            >共 {{ cartStore.allCount }} 件商品，已选择
            {{ cartStore.selectedCount }}
            件，商品合计：&yen;
          </el-text>
          <el-text size="large" class="price"
            >{{ cartStore.selectedPrice.toFixed(2) }}
          </el-text>
        </div>
        <el-button
          type="primary"
          size="large"
          @click="$router.push('/checkout')"
          >下单结算</el-button
        >
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.txt-cart-page {
  width: 100%;
  background: #f5f5f5;
}

.cart {
  padding-top: 20px;
}

.goods {
  display: flex;
  align-items: center;
  font-size: 16px;

  img {
    width: 100px;
    height: 100px;
    margin-right: 20px;
  }
}

.price {
  font-size: 22px;
  color: $priceColor;
}

.action {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  margin-top: 20px;
  background: #fff;
}
</style>
